<template>
  <div id="app">
    <van-nav-bar v-if="$route.name !== 'login'" :title="pageTitle" :left-arrow="showBackButton"
      @click-left="onClickLeft" />

    <router-view />

    <van-tabbar v-if="$route.name !== 'login'" v-model="activeTab" route fixed placeholder>
      <van-tabbar-item  to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item  to="/destinations" icon="location-o">目的地</van-tabbar-item>
      <van-tabbar-item  to="/articles" icon="notes-o">资讯</van-tabbar-item>
      <van-tabbar-item  to="/users" icon="contact-o">用户</van-tabbar-item>
      <van-tabbar-item  to="/orders" icon="orders-o">订单</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showConfirmDialog } from 'vant'

const router = useRouter()
const route = useRoute()

const activeTab = ref(-1) // 初始化为无效值，避免默认选中

const pageTitleMap = {
  'home': '旅游资讯管理系统',
  'destinations': '目的地管理',
  'articles': '旅游资讯管理',
  'users': '用户管理',
  'orders': '订单管理',
  'settings': '系统设置',
  'login': '登录'
}

const pageTitle = computed(() => {
  return pageTitleMap[route.name] || '旅游资讯管理系统'
})

// 添加一个计算属性来判断是否显示返回按钮
const showBackButton = computed(() => {
  return route.name !== 'home' && route.name !== 'login'
})

const updateActiveTab = () => {
  const tabMap = {
    'home': 0,
    'destinations': 1,
    'articles': 2,
    'users': 3,
    'orders': 4
  }
  activeTab.value = tabMap[route.name] !== undefined ? tabMap[route.name] : -1 // 使用-1表示无选中
}

watch(route, () => {
  updateActiveTab()
}, { immediate: true })

const onClickLeft = () => {
  console.log('b')
  // 改进返回逻辑，确保只在需要时才显示返回按钮并执行返回操作
  // if (route.name !== 'home' && route.name !== 'login') {
    router.back()
  // }
}
</script>

<style scoped>
#app {
  height: 100%;
}
</style>